<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Rubik, Arial;
        }

        form {
            text-align: center;
            line-height: 30px;
            height: 80%;
            overflow: auto;
        }

        form hr {
            width: 15%;
        }

        h1 {
            text-align: center;
        }

        #overlay {
            width: 80%;
            margin: 3% auto;
            height: 95vh;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 40px;
            border: 1px solid black;
            max-width: 600px;
        }

        #overlay .done {
            height: 100px;
            display: block;
            margin: auto;
            line-height: 100px;
            text-align: center;
            font-weight: bolder;
            font-size: 2em;

        }

        #logo {
            height: 100px;
            display: block;
            margin: auto;
            line-height: 100px;
            text-align: center;
            font-weight: bolder;
            font-size: 2.5em;
        }


        label {
            margin-right: 25px;
        }
    </style>
</head>

<body>
    <section id="overlay">

        <p id="logo">Order your milktea!</p>
        <hr>
        <!--在这里进行您的代码编写-->
        <form action=" submission.html" method="post">
            <p><label for="taste">你想要什么口味的奶茶？<abbr title="required"><b>*</b></abbr>
                </label>
                <input type="text" name="taste" id="taste" minlength="2" maxlength="10">
                <!-- 限制文本输入长度用minlength maxlength属性 -->
            </p>
            <hr>
            <p> <label for="number">你想要几杯<abbr title="required"><b>*</b></abbr></label>
                <input type="number" name="number" id="number" min="1" max="4" step="1">
            </p>
            <hr>
            <p><label for="sugar">你需要的糖分量</label>
            <p></p>
            无糖<input type="range" name="sugar" id="sugar" min="1分糖" max="5分糖">全糖
            </p>
            <hr>
            <p>
            <p>
                你想要什么顶料？
            </p>


            <label for="icecream"> <input type="checkbox" name="top" id="icecream" value="冰淇淋">冰淇淋</label>
            <label for="milk"><input type="checkbox" name="top" id="milk" value="奶盖">奶盖
            </label>
            <label for="coco"><input type="checkbox" name="top" id="coco" value="可可粉">可可粉
            </label>
            </p>
            <hr>
            <p>
            <p>
                你需要加冰吗？
            </p>
            <label for="yes"><input type="radio" name="ice" id="yes" value="yes">Yes</label>
            <label for="no"><input type="radio" name="ice" id="no" value="no">No</label>


            </p>
            <hr>
            <p>
                <label for="meterial">你需要加什么料？</label>
                <select name="meterial" id="meterial">
                    <option value="珍珠">珍珠</option>
                    <option value="波霸">波霸</option>
                    <option value="布丁">布丁</option>

                </select>
            </p>
            <p>
                <label for="size">你要什么规格</label>
                <select name="size" id="size">
                    <option value="mini">小杯</option>
                    <option value="medium">中杯</option>
                    <option value="large">大杯</option>
                </select>
            </p>
            <p>
            <p><label for="add"> 你还有别的什么要求吗</label>
            </p>
            <textarea name="addition" id="add" cols="40" rows="3"></textarea>
            </p>
            <hr>
            <p>
                <label for="tel">您的联系方式</label>
                <input type="tel" name="customerTEL" id="tel">
            </p>

        </form>
    </section>
</body>

</html>